<template>
  <div class="deploy-confirm">
    <!-- 部署前检查 -->
    <div class="check-section">
      <h3 class="section-title">部署前检查</h3>

      <!-- BMC 信息检查 -->
      <div class="check-item">
        <el-alert
          v-if="!hasBMC"
          title="未检测到BMC信息"
          type="warning"
          description="部署服务器需要BMC信息，请先添加BMC信息"
          show-icon
          :closable="false"
        >
          <template #default>
            <el-button type="primary" @click="showBMCForm = true"> 添加BMC信息 </el-button>
          </template>
        </el-alert>
        <el-alert v-else title="BMC信息检查通过" type="success" :closable="false" show-icon />
      </div>
    </div>

    <!-- 部署配置区域 - 只在有BMC信息时显示 -->
    <template v-if="hasBMC">
      <div class="deploy-settings">
        <h4 class="settings-title">部署配置</h4>
        <div class="settings-content">
          <!-- 这里添加部署配置表单 -->
          <el-form label-width="120px">
            <!-- 部署配置项 -->
          </el-form>
        </div>
      </div>
    </template>

    <!-- BMC 表单 -->
    <BMCForm v-model:visible="showBMCForm" :server-id="serverId" @success="handleBMCSuccess" />

    <!-- 确认按钮 -->
    <div class="actions">
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-tooltip
        effect="dark"
        content="请先添加BMC信息"
        placement="top"
        :disabled="hasBMC"
        :show-after="0"
      >
        <div class="button-wrapper">
          <el-button type="primary" :disabled="!hasBMC" :loading="deploying" @click="handleConfirm">
            确认部署
          </el-button>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import BMCForm from './BMCForm.vue'
import { assetService } from '@/api/assetService'
import { ElMessage } from 'element-plus'

const props = defineProps<{
  serverId: number
}>()

const emit = defineEmits<{
  (e: 'cancel'): void
  (e: 'success'): void
}>()

const hasBMC = ref(false)
const showBMCForm = ref(false)
const deploying = ref(false)

// 检查 BMC 信息
const checkBMC = async () => {
  try {
    const bmcInfo = await assetService.getBMCInfo(props.serverId)
    hasBMC.value = !!bmcInfo
  } catch (error) {
    hasBMC.value = false
  }
}

// BMC 添加成功处理
const handleBMCSuccess = () => {
  checkBMC()
}

// 确认部署
const handleConfirm = async () => {
  if (!hasBMC.value) {
    ElMessage.warning('请先添加BMC信息')
    return
  }

  try {
    deploying.value = true
    await assetService.deployServer(props.serverId)
    ElMessage.success('部署任务已提交')
    emit('success')
  } catch (error) {
    console.error('Failed to deploy server:', error)
    ElMessage.error('部署失败')
  } finally {
    deploying.value = false
  }
}

onMounted(() => {
  checkBMC()
})
</script>

<style scoped lang="scss">
.deploy-confirm {
  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--el-text-color-primary);
  }

  .check-section {
    margin-bottom: 24px;
  }

  .check-item {
    margin-bottom: 16px;

    .el-alert {
      margin-bottom: 12px;
    }
  }

  .deploy-settings {
    margin-top: 24px;
    padding: 20px;
    background-color: var(--el-fill-color-blank);
    border-radius: 4px;
    border: 1px solid var(--el-border-color-light);

    .settings-title {
      font-size: 14px;
      font-weight: 500;
      margin-bottom: 20px;
      color: var(--el-text-color-primary);
    }

    .settings-content {
      padding: 0 16px;
    }
  }

  .actions {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .button-wrapper {
      display: inline-block;
    }
  }
}
</style>
